<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--
    method
        get：提交数据会显示在地址栏，所以不安全。有长度限制，所文件上传肯定不可以用get
        post：数据不会显示在地址栏中，所以安全，没有长度限制。
            参数信息可以通过开发者工具中的netWork（网络）中查看
-->
<form name="myForm" action="32-书本商城购物车-JS实现.html" method="get" enctype="multipart/form-data">
<!--    重置：是将表单回到初始状态，不是清空表单中的内容-->
    <label for="account">账号</label>
    <input id="account" type="text" value="账号" maxlength="10" minlength="3">
<!--    对于表单元素，一定要有name属性的值。如果没有提交表单时，不会处理-->
    <input type="text" name="pass" value="密码" size="50">
<!--    <input type="text" name="pass" width="100" value="密码">-->
    <fieldset>
        <legend>health information</legend>
        <input type="radio" name="gender">女
        <input type="radio" name="gender">男
        <input type="number" name="price" max="20" min="0" step="4" placeholder="价格">
    </fieldset>
    <button type="button" onclick="add()">+</button>
    <button type="button" onclick="mouse()">-</button>
    <input type="date" name="tdate" placeholder="日期">
    <input type="file" multiple>
<!--要按钮Ctrl或Shift键-->
    <select name="mysel" multiple>
        <option>选项一</option>
        <option selected>选项二</option>
        <optgroup label="分组一">
            <option value="3">选项三</option>
            <option>选项四</option>
        </optgroup>
        <optgroup label="分组二">
            <option>选项五</option>
            <option>选项六</option>
        </optgroup>
    </select>
    <button type="reset">重置</button>
    <button type="button" onclick="myReset()">自定义重置</button>
    <button type="submit">submit是默认值</button>
</form>
<script>
    let form = document.querySelector("form");
    function myReset() {
        form.reset();
    }
    let file = document.querySelector("input[type='file']");
    console.log(file.list);

    function add() {
        form["price"].stepUp(1);
        console.log(form["price"].valueAsNumber);
        console.log(typeof form["price"].valueAsNumber);

        console.log(form["tdate"].valueAsDate);
        console.log(form["tdate"].value);
        console.log(typeof form["tdate"].valueAsDate);
    }

    function mouse() {
        form["price"].stepDown(1);
    }

    console.log(form.length);
    console.log(form[0]);
    console.log(form["pass"]);

    console.log(form.elements);
    console.log(form.name);
    console.log(form.action);
    console.log(form.acceptCharset);
    console.log(form.autocomplete);
    console.log(form.encoding);
    console.log(form.enctype);
    console.log(form.method);
    console.log(form.target);
    form[0].select();

    console.log(form["mysel"].length);
    console.log(form["mysel"].options);
    //如果没有选中项，返回-1.txt
    console.log(form["mysel"].selectedIndex);
    form["mysel"].onchange = function (e) {
        //e.target：当触发事件的元素
        console.log(e);
        console.log(form["mysel"].selectedIndex);
        console.log(form["mysel"].selectedOptions);
        form["mysel"].size = 20;
        console.log(form["mysel"].value);
    }

    // form["mysel"].options[0].text = "1.txt"
    // form["mysel"][0].text = "1.txt"
    form["mysel"].item(0).text = "1"

    let opt = document.createElement("option");
    opt.text = "新添加的";
    opt.value = "2";
    form["mysel"].add(opt);
    form["mysel"].remove(0);//移除指定位置上的option
    form["mysel"].remove();//移除select本身
</script>
</body>
</html>